<template>
  <article :class="$style.card">
    <div :class="$style.cardBody">
      <header :class="$style.flex">
        <!--        <a-avatar-->
        <!--          :size="50"-->
        <!--          style="color: #f56a00; background-color: #fde3cf; margin-right: 10px"-->
        <!--        >-->
        <!--          Umi-->
        <!--        </a-avatar>-->
        <div :class="[$style.flex, $style.title]">
          <div>Umi生活</div>
          <div :class="$style.time">{{ newItem.publish_time }}</div>
        </div>
      </header>
      <div :class="$style.content">
        {{ newItem.summary_content }}
      </div>
    </div>
    <footer>
      <div :class="[$style.flex, $style.icon]" style="align-items: center">
        <div :class="$style.item" @click="playText">
          <img src="@/assets/24gf-volumeHigh.png" alt="" />
          <!--          <LikeFilled v-if="newItem.like_count > 0" />-->
          <!--          <LikeOutlined v-else />-->
          <!--          <span style="margin-left: 10px">{{ newItem.like_count || 0 }}</span>-->
        </div>
        <audio
          ref="audioPlayer"
          :src="audioSrc"
          controls
          style="height: 30px"
        ></audio>
      </div>
    </footer>
  </article>
</template>

<script setup lang="ts">
import { NewItem, playAudio } from '@/api';
import { PropType, ref } from 'vue';
import { useDebounceFn } from '@vueuse/core';

const props = defineProps({
  newItem: {
    type: Object as PropType<NewItem>,
    required: true,
  },
});
// const emits = defineEmits<{
//   refreshData: [];
// }>();
// const getData = () => {
//   emits('refreshData');
// };
// const handleLike = useDebounceFn(async () => {
//   try {
//     const params = {
//       new_id: props.newItem?.new_id,
//     };
//     await changeLike(params);
//     getData();
//   } catch {
//     return false;
//   }
// }, 300);
const audioPlayer = ref();
const audioSrc = ref('');
const audioLoading = ref(false);
const playMp3 = () => {
  const audio = audioPlayer.value;
  if (audio) {
    audio.addEventListener('loadstart', () => {
      audioLoading.value = true;
    });

    audio.addEventListener('loadeddata', () => {
      audioLoading.value = true;
    });

    audio.addEventListener('canplay', () => {
      audioLoading.value = false;
      audio.play();
    });
  }
};
const pauseMp3 = () => {
  const audio = audioPlayer.value;
  if (audio) {
    audioPlayer.value.pause();
  }
};
const playText = useDebounceFn(async () => {
  try {
    const params = {
      text: props.newItem?.summary_content,
    };
    const res = await playAudio(params);
    audioSrc.value = res.data.voice_url;
    if (audioSrc.value !== '') {
      playMp3();
    }
  } catch {
    return false;
  }
}, 300);
</script>

<style module lang="less">
.card {
  width: 100%;
  background-color: #ffffff;
  border-radius: 5px;
  .cardBody {
    padding: 16px 18px 0;
    .title {
      display: flex;
      flex-direction: column;
      .time {
        color: #939393;
        font-size: 13px;
      }
    }
    .content {
      margin-left: 60px;
      margin-top: 3px;
    }
  }
  .icon {
    height: 40px;
    line-height: 40px;
    margin: 0 15px;
    cursor: pointer;
    .item {
      width: 100px;
      text-align: center;
      padding: 0;
      font-size: 16px;
      color: grey;
      font-weight: 400;
      height: auto;
      & img {
        width: 20px;
        height: 20px;
      }
    }
    &:hover {
      .item {
        color: #1890ff;
      }
    }
  }
  .flex {
    display: flex;
  }
}
</style>
